<template>
    <div class="order">
      <div class="data">
          <span :class="{active:currentIndex==index}" @click="currentIndex=index" v-for="(item,index) in arr" :key="index">{{item}}</span>
      </div>
      <div class="goods" v-for="(item,index) in goods" :key="index">
          <div class="header">
              <div class="title">{{item.name}}</div>
              <span>已送达</span>
          </div>
          <div class="main">
              <div class="imgBox">
                  <img :src="item.picUrl" alt="">
                  <img :src="item.picUrl" alt="">
              </div>
              <div class="des">
                  <div class="price">￥{{item.wmPoiScore}}</div>
                  <div class="count">{{item.monthSalesTip}}</div>
              </div>
          </div>
          <div class="btn">
              <button>再来一单</button>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
      data(){
          return {
              currentIndex:0,
              arr:['全部','待消费','待评价','退款'],
              goods:[]
          }
      },
      mounted(){ 
              axios.get('/api/shop/list').then((res)=>{
              this.goods = res.data.list; 
          })
      },
  }
  </script>
  
  <style lang="scss" scoped>
      .order{
          width: 100%;
          height: 100%;
          background: rgb(220, 212, 212);
          overflow: hidden;
      }
      .data{
          height: 60px;
          line-height: 60px;
          display: flex;
          justify-content: space-around;
          align-content: center;
          margin-top: 40px;
          padding-right: 150px;
      }
      .data .active{
          font-weight: bold;
          border-bottom: 2px solid rgb(1,142,255);
      }
      // 商品列表
      .goods{
          height: 200px;
          margin: 10px;
          background:#f5f5f5;
          border-radius: 20px;
          padding:0 5px;
          box-sizing: border-box;
      }
      .goods .header{
          display: flex;
          height: 60px;
          line-height: 60px;
          justify-content: space-between;
      }
      .goods .header .title{
          font-weight: bold;
      }
      .goods .main{
          height: 80px;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .goods .main img{
          width:80px;
          height:80px;
          margin-right: 5px;
          border-radius: 5px;
      }
      .goods .main .price{
          font-weight: bold;
          margin-bottom: 5px;
      }
      .goods .main .count{
          font-size: 14px;
      }
      button{
          float:right;
          width: 80px;
          height: 30px;
          border-radius: 20px;
          border: 2px solid rgb(1,142,255);
          color: rgb(1,142,255);
          outline: none;
          background: white;
      }
  
  </style>